<template>
  <el-container style="height: 100vh; overflow: hidden;"> <!-- 根容器固定全屏高度，避免滚动溢出 -->
    <!-- 侧边栏：独立滚动 + 样式隔离 -->
    <el-aside width="200px" class="aside-container">
      <el-menu
          :default-active="'1'"
          class="el-menu-vertical-demo menu-container"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
      >
        <!-- 首页 -->
        <el-menu-item index="1">
          <i class="el-icon-home"></i>
          <span slot="title">
            <router-link to="/userindex" tag="span">首页</router-link>
          </span>
        </el-menu-item>

        <!-- 系统管理 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item index="2-1">
            <router-link to="/userindex/userinfo" tag="span">用户管理</router-link>
          </el-menu-item>
          <el-menu-item index="2-2">角色管理</el-menu-item>
          <el-menu-item index="2-3">菜单管理</el-menu-item>
        </el-submenu>

        <!-- 系统监控 -->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-monitor"></i>
            <span>系统监控</span>
          </template>
          <el-menu-item index="3-1">实时监控</el-menu-item>
          <el-menu-item index="3-2">日志管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- 主内容区：垂直布局 + 自适应高度 -->
    <el-container class="main-container">
      <!-- 顶部导航栏：固定高度 + 内容居中 -->
      <el-header class="header-container">
        <div class="header-content">
          <!-- 面包屑：修复原空内容问题，补充默认路径 -->
          <el-breadcrumb separator="/" class="breadcrumb">

          </el-breadcrumb>

          <!-- 用户信息下拉：修复对齐问题 -->
          <el-dropdown @command="handleCommand" class="user-dropdown">
            <span class="el-dropdown-link">
              <img
                  src="../assets/logo.png"
                  alt="avatar"
                  class="user-avatar"
                  @error="handleAvatarError"
              />
              {{username}} <!-- 动态获取用户名，无数据时显示默认值 -->
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" align="end"> <!-- 右对齐，避免溢出 -->
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容区域：滚动优化 + 间距统一 -->
      <el-main class="content-container">
        <!-- 仅在首页时显示图片 -->
        <div v-if="isHomePage">
          <img src="../assets/logo.png" alt="首页图片">
        </div>

        <!-- 路由视图始终显示 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {logout} from "@/api/user";

export default {
  name: "ParamManagement", // 修正组件名，符合语义化
  data() {
    return {
      queryParams: {
        paramName: '',
        paramKey: '',
        isSystem: ''
      },
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      total: 8,
      selectedRows: []
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log('菜单展开:', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('菜单关闭:', key, keyPath);
    },
    // 处理用户头像加载失败
    handleAvatarError(e) {
      e.target.src = '../assets/default-avatar.png'; // 替换为默认头像路径
    },
    handleCommand(command) {
      if (command === 'profile') {
        this.$message.info('跳转到个人中心');
        this.$router.push('/profile'); // 补充路由跳转逻辑
      } else if (command === 'logout') {
        this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          logout().then(res=>{
            if (res.data.code !== 200) {
              this.$message.error("退出登录失败")
            } else {
              this.$message.success("退出登录成功")
              // 删除token
              this.$store.commit('setToken',{})
              // 跳转到登录页面
              this.$router.push('/login')
            }
          })
        }).catch(() => {
          this.$message.info('已取消退出'); // 补充取消提示
        });
      }
    },
    handleSearch() {
      console.log('搜索参数:', { ...this.queryParams, dateRange: this.dateRange });
      // 实际项目中补充API请求逻辑
    },
    resetForm() {
      this.queryParams = { paramName: '', paramKey: '', isSystem: '' };
      this.dateRange = [];
      this.handleSearch();
      this.$message.info('已重置搜索条件'); // 补充重置提示
    },
    handleAdd() {
      this.$message.info('打开新增参数弹窗');
      // 实际项目中补充弹窗逻辑：this.$refs.addModal.open()
    },
    handleEdit(row) {
      // 处理批量编辑和单条编辑逻辑
      const targetRow = row || (this.selectedRows.length === 1 ? this.selectedRows[0] : null);
      if (!targetRow) {
        this.$message.warning('请选择一条数据进行编辑');
        return;
      }
      this.$message.info(`编辑参数: ${targetRow.paramName}`);
      // 实际项目中补充弹窗逻辑：this.$refs.editModal.open(targetRow)
    },
    handleDelete(row) {
      // 处理批量删除和单条删除逻辑
      const targetRows = row ? [row] : this.selectedRows;
      if (targetRows.length === 0) {
        this.$message.warning('请选择至少一条数据进行删除');
        return;
      }
      // 系统内置参数禁止删除（业务优化）
      const hasSystemParam = targetRows.some(item => item.isSystem === '是');
      if (hasSystemParam) {
        this.$message.error('系统内置参数不允许删除');
        return;
      }

      this.$confirm(`确定要删除选中的 ${targetRows.length} 条数据吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        // 实际项目中补充API删除逻辑
        this.tableData = this.tableData.filter(item => !targetRows.includes(item));
        this.total = this.tableData.length;
        this.selectedRows = []; // 清空选中状态
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleExport() {
      this.$message.info('导出功能暂未实现');
      // 实际项目中补充导出逻辑：window.open(`/api/param/export?${qs.stringify(this.queryParams)}`)
    },
    handleRefreshCache() {
      this.$message.success('缓存刷新成功');
      // 实际项目中补充缓存刷新API逻辑
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 页码重置为1（用户体验优化）
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleSearch();
    }
  },
  computed: {
    username() {
      return this.$store.state.username || {}; // 避免store无数据时报错
    },
    isHomePage() {
      return this.$route.path === '/userindex';
    }
  }
}
</script>

<style scoped>
/* 1. 根容器样式重置 */
::v-deep .el-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

/* 2. 侧边栏样式优化 */
.aside-container {
  background-color: #001529; /* 与菜单背景色统一，避免白色缝隙 */
  overflow-y: auto; /* 侧边栏内容超出时可滚动 */
  height: 100vh;
  padding-top: 20px; /* 顶部间距优化 */
}
.menu-container {
  border-right: none; /* 移除默认右边框，避免重复线条 */
  height: calc(100% - 20px); /* 适配顶部padding */
}

/* 3. 主内容区容器 */
.main-container {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占满剩余宽度 */
  height: 100vh;
  overflow: hidden;
}

/* 4. 顶部导航栏优化 */
.header-container {
  background-color: #fff;
  color: #333;
  height: 60px !important; /* 强制固定高度，避免Element UI默认行高影响 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 增加阴影，提升层次感 */
  padding: 0 20px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.breadcrumb {
  font-size: 14px;
}
.user-dropdown {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover; /* 头像适配，避免拉伸 */
}

/* 5. 内容区域优化 */
.content-container {
  background-color: #f5f7fa; /* 更柔和的背景色，提升视觉体验 */
  padding: 20px;
  overflow-y: auto; /* 内容超出时可滚动 */
  line-height: normal; /* 重置默认行高，避免表格内容错位 */
}

/* 6. 搜索表单样式 */
.search-form {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0; /* 增加分隔线，区分区域 */
}
.form-input, .form-select, .form-datepicker {
  width: 200px; /* 统一输入框宽度 */
}
.search-btn-group {
  margin-left: 10px;
}

/* 7. 操作按钮栏样式 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.operation-btn-group button {
  margin-right: 8px; /* 按钮间距统一 */
}
/* 紧凑模式按钮：默认隐藏，小屏幕显示 */
.compact-btn-group {
  display: none;
}

/* 8. 表格样式优化 */
.data-table {
  width: 100%;
  margin-bottom: 20px;
}
.table-header {
  background-color: #f5f7fa;
  font-weight: 500;
}
.table-row {
  height: 50px; /* 统一行高，避免内容错位 */
}
/* 修复表格单元格内边距 */
::v-deep .el-table__cell {
  padding: 12px 10px;
}

/* 9. 分页样式优化 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* 10. 响应式适配：小屏幕优化 */
@media (max-width: 1200px) {
  .form-input, .form-select, .form-datepicker {
    width: 160px; /* 缩小输入框宽度 */
  }
}
@media (max-width: 992px) {
  .operation-btn-group {
    display: none; /* 隐藏普通按钮组 */
  }
  .compact-btn-group {
    display: flex; /* 显示紧凑按钮组 */
    gap: 8px; /* 按钮间距 */
  }
}
@media (max-width: 768px) {
  .aside-container {
    width: 60px !important; /* 侧边栏收缩为图标模式 */
  }
  /* 隐藏侧边栏文字，只显示图标 */
  ::v-deep .el-menu-vertical-demo .el-menu-item span,
  ::v-deep .el-menu-vertical-demo .el-submenu__title span {
    display: none;
  }
  ::v-deep .el-menu-vertical-demo .el-menu-item i,
  ::v-deep .el-menu-vertical-demo .el-submenu__title i {
    margin-right: 0;
    font-size: 18px;
  }
  .form-input, .form-select, .form-datepicker {
    width: 120px;
  }
}
</style>
